<template>
    <div>
        <transition name="fade">
            <div class="loading">
                <h2 class="loading-content">正在加载...</h2>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    props: [ 'mesasge' ],
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
}
.fade-enter, .fade-leave-active {
    opacity: 0
}

.loading {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 12345;
    top: 0;
    left: 0;
    background: url(../assets/img/loading.gif) center 42% no-repeat;
    background-color: #ffffff;
    background-size: 40px 40px;
}
.loading .loading-content {
    position: fixed;
    top: 50%;
    width: 100%;
    font-size: 0.30rem;
    text-align: center;
}
</style>
